<template>
	<view class="uni-common-mt">
		<view class="uni-form-item uni-column fg">
			<view class="title">商品名称</view>
			<input class="uni-input" placeholder="请输入商品名称" v-model="mc" />
		</view>

		<view class="uni-form-item uni-column fg">
			<view class="title">置顶</view>
			<radio-group name="radio" @change="zdChange">
				<label>
					<radio value="1" :checked="zd ==1" /><text>置顶</text>
				</label>
				<label>
					<radio value="0" :checked="zd ==0" /><text>不置顶</text>
				</label>
			</radio-group>
		</view>


		<view class="uni-form-item uni-column fg">
			<view class="title">售卖日期</view>
			<picker mode="date" :value="smrq" start="1950-09-01" end="2123-09-01" @change="dateChange">
				<view class="picker">
					{{smrq || "2023-06-18"}}
				</view>
			</picker>
		</view>


		<view class="uni-form-item uni-column">
			<view class="title">商品描述</view>
			<view class="uni-textarea">
				<textarea v-model="ms" />
			</view>
		</view>


		<view class="uni-btn-v">
			<button type="primary" @tap="save">保存</button>
		</view>

		<view class="uni-btn-v">
			<button type="warn" @tap="qc">清除缓存</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				mc: '',
				zd: 0,
				smrq: '2023-06-18',
				ms: '商品介绍默认。。。',
			}
		},
		onLoad() {
			//初始化数据，一般读取远程服务器数据，本次案例读取缓存本地的数据，
			this.initData();
		},
		methods: {
			zdChange(e) {
				this.zd = e.detail.value
			},
			dateChange(e) {
				this.smrq = e.detail.value;
			},
			initData() {
				debugger
				this.mc = uni.getStorageSync("mc")
				this.zd = uni.getStorageSync("zd")
				this.smrq = uni.getStorageSync("smrq")
				this.ms = uni.getStorageSync("ms")
			},
			save() {
				uni.setStorageSync("mc", this.mc)
				uni.setStorageSync("zd", this.zd)
				uni.setStorageSync("smrq", this.smrq)
				uni.setStorageSync("ms", this.ms)
			},
			qc() {
				uni.removeStorageSync("mc")
				uni.removeStorageSync("zd")
				uni.removeStorageSync("smrq")
				uni.removeStorageSync("ms")
			}
		}
	}
</script>

<style>
	button {
		margin-top: 10px;
	}

	.fg {
		border-bottom: solid 1px orangered;
	}
</style>